<template>
  <div id="revenueoption">
    <el-container style="border: 1px solid #eee; position: relative;border-radius: 2px">
      <el-aside width="150px" style="border-right: 1px solid #eee;">
        <div style="display:flex;flex-wrap: wrap;width: 100%;height: auto">
          <template v-for="(item) in initEventGroup">
            <el-row class="optionGroupAside"
                    :key="item.id"
                    :class="{currentItemBoxParent:isCurrentEventParent(item)}"
                    @click.native="scrollToPlace(item.title)">
              <el-col :span="2" v-if="isCurrentEventParent(item)" class="optionGroupItemSelectedHead">
              </el-col>
              <el-col :span="2" v-else>
              </el-col>

              <el-col :span="15">{{item.groupName}}</el-col>
              <el-col :span="7" v-if="isCurrentEventParent(item)">
                <div class="optionGroupItemSelected">{{item.mateEventList.length}}</div>
              </el-col>
              <el-col :span="7" v-else>
                <div class="optionGroupItemNoSelected">{{item.mateEventList.length}}</div>
              </el-col>

              <!--                            <el-button v-if="isCurrentEventParent(item)" type="success" round size="mini">{{item.eventIds.length}}</el-button>-->
              <!--                            <el-button v-else type="info" round size="mini">{{item.eventIds.length}}</el-button>-->
            </el-row>
          </template>
        </div>
      </el-aside>

      <el-container>
        <el-header>
          <el-row>
            <el-col :span="16">
              <el-input class="paperview-input-text" placeholder="请输入搜索内容"
                        prefix-icon="el-icon-search"
                        v-model="currentSearchValue" size="small"></el-input>
            </el-col>
            <el-col :span="3"></el-col>
            <el-col :span="5">
              <el-divider direction="vertical"></el-divider>
              <span style="color:#3CD2A9" @click="choScreenOptionsEvent()">筛选</span>
              <el-divider direction="vertical"></el-divider>
              <el-dropdown>
                <i class="el-icon-setting" style="margin-right: 15px"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>查看</el-dropdown-item>
                  <el-dropdown-item>新增</el-dropdown-item>
                  <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-header>
        <el-divider class="el-divider_header"></el-divider>

        <el-main id="el_main_" style="width: 500px;position: relative">
          <div class="initEventContentBox">
            <template v-for="(item,index) in groupToDetailListNames.names.length">
              <div :id="groupToDetailListNames.names[index]"></div>

              <template
                      v-if="(currentSearchValue===''&&currentSearchValueGroupEventIds==='')||currentSearchValueGroupEventIds.indexOf(groupToDetailListNames.ids[index]+',')>-1">
                <el-row class="selectOptionsContentRows" :key="item">
                  <el-col :span="1" style="height: 100%">
                    <div style="width: 3px;height: 18px;margin-top: 6px;background-color: #04cb94"></div>
                  </el-col>
                  <el-col :span="23"
                          style="height: 100%;justify-content: center;line-height: 30px;display: flex;align-items:center">
                    <div>{{groupToDetailListNames.names[index]}}</div>
                    <div style="flex:1 0 auto;background:#e9f0f7;height:1px"></div>
                  </el-col>
                </el-row>
              </template>


              <template v-for="(detailItem,detailIndex) in groupToDetailList[index].length">
                <div :id="groupToDetailList[index][detailIndex].id"
                     class="grid-content"
                     style="height: 30px;line-height: 30px ;font-size: small;cursor: pointer;padding-left: 10px"
                     v-if="groupToDetailList[index][detailIndex].cname.indexOf(currentSearchValue) > -1"
                     @click="selectEvent(index,detailIndex)"
                     v-bind:class="{currentItemBox:groupToDetailList[index][detailIndex].id===currentEvent.id}"
                     :key="detailItem.id">
                  {{groupToDetailList[index][detailIndex].cname}}
                </div>
              </template>

            </template>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

  export default {
    props: {
      /* 用户分组详情组件*/
      initEventGroupDetail: {
        type: Array,
        default: () => {
          return [];
        }
      },
      /* 用户分组组件*/
      initEventGroup: {
        type: Array,
        default: () => {
          return [];
        }
      },
      /* 是页面第几个控件 List的时候使用*/
      origin: {
        type: Object,
        default: () => {
          return {};
        }
      },
      /* 父级当前选中控件*/
      currentEvent: {
        type: Object,
        default: () => {
          return {};
        }
      }
    },
    components: {
      /* 自定义的筛选框 暂时未完成*/
    },
    data() {
      return {
        /* 当前搜索的名字*/
        currentSearchValue: "",
        /* 自定义的筛选框是否展示 暂时未完成*/
        showScreenEventGroup: false,
        /* 当前搜索的名字对应的群组Id*/
        currentSearchValueGroupEventIds: "",
        /* 最近使用事件数组*/
        // virtualEventGroup: [],
        /* 组别对应的详情数组 --- 数据*/
        groupToDetailList: [],
        /* 组别对应的详情数组 --- 名字 与 id*/
        groupToDetailListNames: {names: [], ids: []}

      }
    },
    watch: {
      /* 搜索时添加当前类别Id 用于区分*/
      currentSearchValue: function (newval, oldval) {
        this.currentSearchValueGroupEventIds = "";
        if (newval !== "") {
          for (let i = 0; i < this.initEventGroup.length; i++) {
            for (let j = 0; j < this.initEventGroup[i].mateEventList.length; j++) {
              for (let k = 0; k < this.initEventGroupDetail.length; k++) {
                if (this.initEventGroupDetail[k].cname.indexOf(newval) > -1) {
                  if (this.initEventGroupDetail[k].eventId === this.initEventGroup[i].mateEventList[j].eventId) {
                    this.currentSearchValueGroupEventIds += this.initEventGroup[i].eventId + ",";
                  }
                }
              }
            }
          }
        }
      }
    },
    methods: {
      scrollToPlace(title, isItem) {
        if (isItem === true) {
          document.getElementById("el_main_").scrollTop = document.getElementById(title).offsetTop - 100;
        } else {
          document.getElementById("el_main_").scrollTop = document.getElementById(title).offsetTop;
        }

      },
      /* 判断是否是当前选中对象的父级 */
      isCurrentEventParent(parentObj) {
        let isParent = false;
        for (let i = 0; i < parentObj.mateEventList.length; i++) {
          if (parentObj.mateEventList[i].eventId === this.currentEvent.eventId) {
            isParent = true;
          }
        }
        return isParent;
      },
      choScreenOptionsEvent() {
        this.showScreenEventGroup = !this.showScreenEventGroup;
      },
      /* 选择事件 */
      selectEvent(index, detailIndex) {
        this.$emit("choInitEventEnd", {mes: this.groupToDetailList[index][detailIndex], origin: this.origin})
      },
      // selectNearEvent(index) {
      //     this.$emit("choInitEventEnd", {mes: this.virtualEventGroup[index], origin: this.origin})
      // }
    },
    beforeCreate() {
    },
    created() {
    },
    beforeMount() {
    },
    mounted() {
      this.$nextTick(() => {
        // 组合群组对应的子项
        for (let j = 0; j < this.initEventGroup.length; j++) {
          let item = [];
          for (let k = 0; k < this.initEventGroup[j].mateEventList.length; k++) {
            for (let m = 0; m < this.initEventGroupDetail.length; m++) {
              if (this.initEventGroupDetail[m].eventId === this.initEventGroup[j].mateEventList[k].eventId) {
                item.push(this.initEventGroupDetail[m]);
              }
            }
          }
          this.groupToDetailListNames.names.push(this.initEventGroup[j].groupName)
          this.groupToDetailListNames.ids.push(this.initEventGroup[j].id)
          this.groupToDetailList.push(item);
        }

        //页面定位到当前选中事件
        this.$nextTick(() => {
          let name = "";
          if (this.currentEvent.id !== undefined) {
            this.scrollToPlace(this.currentEvent.id, true);
          }
        })

        this.$forceUpdate();
      });


    },
    computed: {}
  }
</script>

<style scoped lang="scss">

  .optionGroupAside {
    height: 36px;
    line-height: 36px;
    width: 100%;
    font-size: small;
    cursor: pointer;

    .el-col {
      border-radius: 0px;
    }

    &:hover {
      background-color: #f1fcfc;
    }
  }

  .selectOptionsContentRows {
    height: 30px;
    width: 100%;
    padding: 0px 0px 0px 0px;
  }

  .optionGroupItemSelectedHead {
    border-left: 3px solid #00bf8a;
  }

  .optionGroupItemSelected {
    line-height: 18px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: #04cb94;
    width: 30px;
    height: 18px;
    color: #ffffff;
    text-align: center;
  }

  .optionGroupItemNoSelected {
    line-height: 18px;
    margin-top: 10px;
    border-radius: 10px;
    background-color: #e6e6e6;
    width: 30px;
    height: 18px;
    color: #5a5a5a;
    text-align: center;
  }

  .el-row {
    display: flex;
    flex-wrap: wrap
  }

  .initEventContentBox {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start; //解决问题的样式
  }

  .currentItemBox {
    background-color: #0ACC97;
    color: #ffffff !important;
  }

  .currentItemBoxParent {
    background-color: #e4f9f9;
    color: #06C18D !important;
  }


  .el-header {
    padding: 0px;
    background-color: #ffffff;
    color: #333;
    line-height: 40px;
    height: 40px !important;
  }

  .paperview-input-text {
    ::v-deep .el-input__inner {
      border: none;
    }
  }

  .el-main {
    background-color: #ffffff;
  }


  #revenueoption {
    margin-top: 4px;
    height: 400px;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); //设置两层阴影
    position: absolute;
    left: -1px;
    top: 100%;
    z-index: 99;
    display: flex;
    flex-direction: column; //纵向排列
  }


  .el-col {
    border-radius: 4px;
  }


  .grid-content {
    color: #1f2f3d;
    width: 210px;
    border-radius: 4px;
    box-sizing: border-box;
    text-overflow: ellipsis; /* ellipsis:显示省略符号来代表被修剪的文本  string:使用给定的字符串来代表被修剪的文本*/
    white-space: nowrap; /* nowrap:规定段落中的文本不进行换行   */
    overflow: hidden; /*超出部分隐藏*/
    &:not(.currentItemBox) {
      &:hover {
        background-color: #EDFAF7 !important;
      }
    }
  }

  .el-divider_header {
    margin-top: 1px !important;
    margin-bottom: 5px !important;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #ffffff;
  }


</style>
